$font-color: rgba(0, 0, 0, 0.7);

.markdown-body {
  width: 50vw;

  pre {
    padding: 20px 10px !important;
    display: block;
    color: #abb2bf;
    font-family: Menlo, Consolas, 'Courier New', Courier, FreeMono, monospace;
    background: #292c34;
    border-radius: 4px;
    overflow-y: hidden !important;
    overflow-x: auto !important;
    margin: 10px 0 !important;
    line-height: 1.5;

    * {
      font-family: Menlo, Consolas, 'Courier New', Courier, FreeMono, monospace;
    }
  }

  code {
    margin: 0 5px;
    padding: 0 5px;
    border-radius: 5px;
    font-family: Menlo, Consolas, 'Courier New', Courier, FreeMono, monospace;
  }

  .hljs-comment,
  .hljs-quote {
    color: #5c6370;
    font-style: italic;
  }

  .hljs-doctag,
  .hljs-formula,
  .hljs-keyword {
    color: #c678dd;
  }

  .hljs-deletion,
  .hljs-name,
  .hljs-section,
  .hljs-selector-tag,
  .hljs-subst {
    color: #e06c75;
  }

  .hljs-literal {
    color: #56b6c2;
  }

  .hljs-addition,
  .hljs-attribute,
  .hljs-meta-string,
  .hljs-regexp,
  .hljs-string {
    color: #98c379;
  }

  .hljs-built_in,
  .hljs-class {
    .hljs-title {
      color: #e6c07b;
    }
  }

  .hljs-attr,
  .hljs-number,
  .hljs-selector-attr,
  .hljs-selector-class,
  .hljs-selector-pseudo,
  .hljs-template-variable,
  .hljs-type,
  .hljs-variable {
    color: #d19a66;
  }

  .hljs-bullet,
  .hljs-link,
  .hljs-meta,
  .hljs-selector-id,
  .hljs-symbol,
  .hljs-title {
    color: #61aeee;
  }

  .hljs-emphasis {
    font-style: italic;
  }

  .hljs-strong {
    font-weight: bold;
  }

  .hljs-link {
    text-decoration: underline;
  }

  iframe {
    width: 100%;
    height: 600px;
  }

  p,
  li,
  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    line-height: 2;
    color: $font-color;

    a {
      display: none;
    }
  }

  h2 {
    border-top: 2px dashed #d9d9d9;
    margin-top: 20px;
  }

  img {
    max-width: 100%;
  }

  table,
  th,
  td {
    border: 2px solid #d9d9d9;
    border-collapse: collapse;
    font-family: Menlo, Consolas, 'Courier New', Courier, FreeMono, monospace;
  }

  th,
  td {
    min-width: 160px;
    height: 40px;
    padding: 3px 20px;
    text-align: left;
  }

  td {
    height: 30px;
    font-size: 14px;
  }
}

.language-js,
.language-html {
  margin: 0 5px;
  padding: 0 5px;
  border-radius: 5px;
  background: unset !important;
  color: unset !important;
  font-family: Menlo, Consolas, 'Courier New', Courier, FreeMono, monospace;
  line-height: 150%;
}
